<template>
	<view class="content bg-white">

		<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="80%"
			bottom='5%'>
			<view class="column-list bg-white margin-top-sm  flex justify-between" v-for="(item,index) in list"
				:key="index"  @click="jumpTo('./info?id='+item.article_id+'&type=article')">
				<image :src="item.logo" mode="aspectFill" class="radius  " @error="errorImg(index)"></image>
				<view class="right flex flex-direction justify-around">
					<view class="line-2 text-bold article-title">{{item.title}}</view>
					<view class="article-time">{{changeTime(item.created_at).after}}</view>
				</view>
			</view>
		</mescroll-body>


	</view>
</template>

<script>
	import {
		getData
	} from "@/static/laundry/api.js"
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue" //下拉刷新 上拉加载组件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; //
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				title: "全部文章",
				list: [],
				shop_id:-1,
			}
		},
		onLoad(option) {
			(option.shop_id)?(()=>{
				this.shop_id=option.shop_id;
			})():(()=>{
				uni.showModal({
					content:"未查询到对应信息",
					showCancel:false,
					success: () => {
						uni.navigateBack({
							delta:1
						})
					}
				})
				
			})()
		},
		methods: {
			changeTime1(time) {
				var d = new Date(time);
				let year1 = parseInt(d.getFullYear() - 1970);
				let year = (year1 == 0) ? "" : year1 + "年";
				var month = parseInt((time / 1000 / 60 / 60 / 24 / 30) % 12); //月
				let mon =(year1>0 || month ==0 )?"": month + "月";
				var day1 = parseInt((time / 1000 / 60 / 60 / 24) % 30); //天数
				let day = (month > 0 || year1 > 0 || day1 == 0) ? "" : day1 + "天";
				var hour = parseInt((time / 1000 / 60 / 60) % 24); //小时
				let hours = (month > 0 || year1 > 0 || day1 > 0 || hour == 0) ? "" : hour + "小时";
				var minute = parseInt((time / 1000 / 60) % 60); //  分钟
				let min = (month > 0 || year1 > 0 || day1 > 0 || minute == 0 || hour > 0) ? "" : minute + "分钟";
				let sec = parseInt((time / 1000) % 60); //秒
				sec = ( month > 0 || year1 > 0 || day1 > 0 || minute > 0 || hour > 0 || sec == 0) ? "" : sec + "秒";
				let array = {
					after: year + mon + day+hours + min + sec + "前"
				}
				return array;
			},
			changeTime(time) {
				let end = (new Date(time.replace(/-/g, '/'))).getTime();
				let current = (new Date()).getTime();
				let l =parseInt(current - end);
				return this.changeTime1(l);
			},
			//处理加载错误的图
			errorImg(...dat) { //图片加载失败给出默认图
			    this.article[dat[0]].logo = this.resDomain + "/static/img/error.png";
				
			},
			errorImg(...dat) { //图片加载失败给出默认图
			    this.list[dat[0]].logo = this.resDomain + "/static/img/error.png";
				
			},
			jumpTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			upCallback(page) {

				this.apiRequest('/buyer/SportArticle', {
					shop_id: this.shop_id,
					area_id: uni.getStorageSync('area_id'),
					page: page.num,
					limit: page.size,
				}, 0, 'get').then(res => {
					(res.code == 200) ? (() => {
						this.mescroll.endSuccess(res.data.data.length);
						if (page.num == 1) this.list = [];
						this.list = this.list.concat(res.data.data);
					})() : this.mescroll.endErr();
				},e=>{
					this.mescroll.endErr();
				})

			}

		}

	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		$l: calc(100vw*(40/750));
		$w: calc(100vw*(670/750));

		.column-list {
			width: $w;
			margin-left: $l;
			padding: calc(100vw*(20/750));
			height: calc(100vw*(200/750));
			border-radius: 20rpx;

			image {
				width: calc(100vw*(250/750));
				height: calc(100vw*(160/750));
				border-radius: 20rpx;
			}

			.right {
				height: calc(100vw*(160/750));
				width: calc(100vw*(350/750));
				
				
				.article-title{
					font-size: calc(100vw*(32/750));
					font-weight: 800;
					color: #333333;
				}
				.article-time{
					font-size: calc(100vw*(20/750));
					font-weight: bold;
					color: #999999;
				}
			}
		}


	}
</style>
